<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Map</title>
</head>

<body>
  <input type="button" id="login" value="login">
  <script>
    const m = new Map([
      ["k1", "k2"],
      ["k2", "v2"],
      ["k3", "v3"]
    ])
    console.log(m.size);//3
    //初始化映射
    const m2 = new Map({
      [Symbol.iterator]: function* () {
        yield ["k1", "v1"];
        yield ["k2", "v2"];
        yield ["k3", "v3"];
      }
    });
    console.log(m2.size);//3

    console.log(m.has("firstName"));
    console.log(m.get("firstName"), m.size);

    m.set("firstName", "Sloan").set("lastName", "Li");
    console.log(m.get("firstName"));//Sloan
    m.delete("firstName");
    console.log(m.get("firstName"));//undefined
    m.clear();//清除所有的键值对

    const m3 = new Map();
    const funKey = function () { };
    const symbolKey = Symbol();
    const objKey = new Object();
    m3.set(funKey, "functionVal").set(symbolKey, "symbolVal").set(objKey, "objectVal");
    console.log(m3.get(funKey), m3.get(symbolKey), m3.get(objKey));

    const m4 = new Map();
    const objk = {}, objv = {}, arrk = [], arrv = [];
    m4.set(objk, objv).set(arrk, arrv);
    objk.foo = "foo";
    objv.bar = "bar";
    arrk.push("foo");
    arrv.push("bar");
    console.log(m4.get(objk), m4.get(arrk));//{bar: 'bar'}/['bar'];

    const m5 = new Map([
      ["k1", "v1"],
      ["k2", "v2"],
      ["k3", "v3"]
    ])
    for (let pair of m5.entries()) {
      console.log(pair);
    }
    for (let pair of m5[Symbol.iterator]()) {
      console.log(pair);
    }
    console.log([...m5]);

    m5.forEach((val, key) => console.log(`${key} -> ${val}`));

    for (let keys of m5.keys()) {
      console.log(keys);
    }

    for (let val of m5.values()) {
      console.log(val);
    }
    //WeakMap
    const vm = new WeakMap();
    // 设置弱映射的键,WeakMap的键必须是对象,原始值可以包装成对象再用作键.
    const k1 = { id: 1 }, k2 = { id: 2 }, k3 = { id: 3 };
    const vm1 = new WeakMap([
      [k1, "v1"],
      [k2, "v2"],
      [k3, "v3"],
    ])
    console.log(vm1.get(k1), vm1.get(k2), vm1.get(k3));

    const vm2 = new WeakMap().set(k1, "val1");
    console.log(vm2.get(k1)); //val1

    //使用弱映射:私有变量
    const vm3 = new WeakMap();
    class User {
      constructor(id) {
        this.idProperty = Symbol("id");
        this.setId(id);
      }
      setPrivate(property, value) {
        const privateMembers = vm3.get(this) || {};
        privateMembers[property] = value;
        vm3.set(this, privateMembers);
      }
      getPrivate(property) {
        return vm3.get(this)[property];
      }
      setId(id) {
        this.setPrivate(this.idProperty, id);
      }
      getId() {
        return this.getPrivate(this.idProperty);
      }
    }
    const user = new User("Sloan Li");
    console.log(user.getId());
    console.log(user.setId("Li shi long"));
    console.log(user.getId());
    // 并非真正的是私有变量.
    console.log(vm3.get(user)[user.idProperty]);
    //DOM节点原数据
    //若映射不影响垃圾回收.
    const wm = new WeakMap();
    const loginBtn = document.querySelector("#login");
    wm.set(loginBtn, { disabled: true });
  </script>
</body>

</html>